@import 'general';
.Q-Rollover.effect-09{
	// Initial
		.mask-1, .mask-2{
			background-color: rgba(0, 0, 0, 0.5);
	    height: 361px;
	    width: 361px;
	    background: rgba(119, 0, 36, 0.5);
	    .opacity(1);
	    .transition(all 300ms ease-in-out 600ms);
		}
		.mask-1{
			left: auto;
			right: 0px;
			.translateX-rotate(-380px; 56.5deg);
			.transform-origin(100% 0%);
		}
		.mask-2{
			top: auto;
			bottom: 0px;
			.translateX-rotate(380px; 56.5deg);
			.transform-origin(0% 100%);
		}
		.content{
			background: rgba(0, 0, 0, 0.9);
			height: 0px;
			.opacity(.5);
			overflow: hidden;
			.translate-rotate(-112px; 166px; -33.5deg);
			.transform-origin(0% 100);
			.transition(all 400ms ease-in-out 300ms);
		}
		h4{
    	margin-top: 5px;
			background:transparent;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			font-size: 14px;
		}
		p{
			padding:5px;
		}
		a.trigger{
			display: none;
		}
	// animacion
		&:hover .mask,
		&:hover h4,
		&:hover p,
		&:hover a.trigger{
			.opacity(1);
		}
		&:hover .content{
	    height: 100px;
	    width: 100%;
	    .opacity(0.9);
	    top: 40px;
	    .translate-rotate(0px; 0px; 0deg);
		}
		&:hover .mask-1, &:hover .mask-2{
			.transition-delay(0ms);
		}
		&:hover .mask-1{
			.translateX-rotate(1px; 56.5deg);
		}
		&:hover .mask-2{
			.translateX-rotate(-1px; 56.5deg);
		}
}